<template>
	<div style="margin-top: 10px">
		<el-container>
			<el-header>
				<div></div>
				<div>
					<el-button type="primary" icon="el-icon-plus">
						生成课表
					</el-button>					
				</div>
			</el-header>
			<el-main>
				<el-table
				:data="coursePlan"
				stripe
				fit
				overflow=auto
				:header-cell-style="{background:'#6C8FC5',color:'#FFFFFF'}"
				v-loading="loading"
				element-loading-text="正在加载..."
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
				style="width: 100%"
				height="450">
					<el-table-column
					  prop="className"
					  label="班级"
					  align="center" fixed="left">
					</el-table-column>
					<el-table-column
					label="周一"
					align="center">
					  <el-table-column
						label="上午"
						align="center" fixed="left">
							<el-table-column
							label="1,2节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='01'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="3,4节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='02'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="下午"
						align="center" fixed="left">
							<el-table-column
							label="5,6节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='03'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="7,8节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='04'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="晚上"
						align="center" fixed="left">
						<el-table-column
						label="9,10节"
						align="center" fixed="left">
						<template slot-scope="scope">
							<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='05'">
								  {{i.courseName}}<br>
								  {{i.teacherName}}<br>
								  {{i.classroomNo}}</span>
						</template>
						</el-table-column>
					  </el-table-column>				  
					</el-table-column>
					<el-table-column label="周二"
					prop="info"
					align="center">
					  <el-table-column
						label="上午"
						align="center" fixed="left">
							<el-table-column
							label="1,2节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='06'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="3,4节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='07'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="下午"
						align="center" fixed="left">
							<el-table-column
							label="5,6节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='08'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="7,8节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='09'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="晚上"
						align="center" fixed="left">
						<el-table-column
						label="9,10节"
						align="center" fixed="left">
						<template slot-scope="scope">
							<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='10'">
								  {{i.courseName}}<br>
								  {{i.teacherName}}<br>
								  {{i.classroomNo}}</span>
						</template>
						</el-table-column>
					  </el-table-column>				  
					</el-table-column>
					<el-table-column label="周三"
					align="center">
					  <el-table-column
						label="上午"
						align="center" fixed="left">
							<el-table-column
							label="1,2节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='11'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="3,4节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='12'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="下午"
						align="center" fixed="left">
							<el-table-column
							label="5,6节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='13'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="7,8节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='14'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="晚上"
						align="center" fixed="left">
						<el-table-column
						label="9,10节"
						align="center" fixed="left">
						<template slot-scope="scope">
							<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='15'">
								  {{i.courseName}}<br>
								  {{i.teacherName}}<br>
								  {{i.classroomNo}}</span>
						</template>
						</el-table-column>
					  </el-table-column>				  
					</el-table-column>
					<el-table-column label="周四"
					align="center">
					  <el-table-column
						label="上午"
						align="center" fixed="left">
							<el-table-column
							label="1,2节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='16'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="3,4节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='17'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="下午"
						align="center" fixed="left">
							<el-table-column
							label="5,6节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='18'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="7,8节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='19'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="晚上"
						align="center" fixed="left">
						<el-table-column
						label="9,10节"
						align="center" fixed="left">
						<template slot-scope="scope">
							<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='20'">
								  {{i.courseName}}<br>
								  {{i.teacherName}}<br>
								  {{i.classroomNo}}</span>
						</template>
						</el-table-column>
					  </el-table-column>				  
					</el-table-column>
					<el-table-column label="周五"
					align="center">
					  <el-table-column
						label="上午"
						align="center" fixed="left">
							<el-table-column
							label="1,2节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='21'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="3,4节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='22'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="下午"
						align="center" fixed="left">
							<el-table-column
							label="5,6节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='23'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
							<el-table-column
							label="7,8节"
							align="center" fixed="left">
							<template slot-scope="scope">
								<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='24'">
									  {{i.courseName}}<br>
									  {{i.teacherName}}<br>
									  {{i.classroomNo}}</span>
							</template>
							</el-table-column>
					  </el-table-column>
					  <el-table-column
						label="晚上"
						align="center" fixed="left">
						<el-table-column
						label="9,10节"
						align="center" fixed="left">
						<template slot-scope="scope">
							<span v-for="(i,k) in scope.row.info" :key = "k"  v-if="i.classTime =='25'">
								  {{i.courseName}}<br>
								  {{i.teacherName}}<br>
								  {{i.classroomNo}}</span>
						</template>
						</el-table-column>
					  </el-table-column>				  
					</el-table-column>
			  </el-table>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	export default{
		data() {
		    return {
			   coursePlan: [],
			   loading: false,
			   title:'',
		    }
		},
		mounted: function(){
			this.loadCoursePlan();
		},
		methods: {
			loadCoursePlan(){
				this.loading = true;
				let url = '/course/basic/plan';
				this.getRequest(url).then(resp =>{
					   this.loading = false;
					   if(resp){
						   this.coursePlan = resp.coursePlan;
					   }
				})
			}
		}
	}
</script>

<style>
	.el-main {
	    color:  #E9EEF3;
	    line-height: 20px !important;
	}
	.el-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 15px;
		box-sizing: border-box;
	}
	.el-footer {
	    position:fixed;
		bottom:10px;
		left: 0;
		right: 0;
		line-height:60px;
	  }
	.el-pagination {
		display: flex;
		justify-content: flex-end;
		text-align: center;
	}
</style>
